import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
//引入样式
import './withRightNav.scss';


function useRightNav() {
    const [type5, setType5] = useState(false);
    const navigate = useNavigate();
    const changeFn = () => {
        setType5(!type5);
    }
    //添加了两个函数
    const goHome = () => {
        navigate('/');
    }
    const goCart = () => {
        navigate('/cart');
    }


    useEffect(() => {
        setTimeout(() => {
            setType5(true);
        }, 500);
    }, []);
    const quickBtn = <div className="quick_con">
        <div className={type5 ? "btn1" : "active"} ></div>
        -+   <div className={type5 ? "btn2" : "active"} onClick={goCart} ></div>
        <div className={type5 ? "btn3" : "active"}></div>
        -+ <div className={type5 ? "btn4" : "active"} onClick={goHome} ></div>
        <div onClick={changeFn} className={type5 ? "btn5" : "btn5_1"} ></div>
    </div>
    return quickBtn;
}
export default useRightNav;